<template>
<div class="container">
  <div class="header">
    <div class="header-left"><img class="logo" src="@/assets/logo.png" alt="">
      <span class="title">协会管理系统</span>
    </div>
    <div class="header-right">
      已有账号,
      <el-button type="text" @click="handleLogin">立即登录</el-button>
    </div>
  </div>
  <!-- 注册主页 -->
  <div class="main">
    <div class="center-top">注册信息&nbsp;<span style="color:#97a8be">>&nbsp;协会认证</span></div>
    <div class="center-content">
      <div style="margin: 0 auto;width:1200px">
        <el-form ref="formLabelAlign" :label-position="labelPosition" label-width="150px" :model="formLabelAlign" style="display:flex;width:950px;flex-wrap:wrap;margin: 0 auto;">
          <my-input label="名称" v-model="formLabelAlign.name" prop="name" required></my-input>
          <my-input label="法人" v-model="formLabelAlign.legalPerson" prop="legalPerson" required></my-input>
          <my-input label="办公地址" v-model="formLabelAlign.officeAddress" prop="officeAddress" required></my-input>
          <my-input label="联系人" v-model="formLabelAlign.contactPerson" prop="contactPerson" required></my-input>
          <my-input label="联系电话" v-model="formLabelAlign.contactMobile" prop="contactMobile" required mobile></my-input>
          <my-input label="邮箱" v-model="formLabelAlign.email" prop="email" required email></my-input>
          <myFormItem label="资质文件">
            <el-upload class="upload-demo" style="width: 300px" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </myFormItem>
          <myFormItem label="协会logo">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </myFormItem>
        </el-form>
        <div class="Tbutton">
          <el-button class="submit-btn" type="primary" @click="handleSubmit('formLabelAlign')">立即提交</el-button>
          <el-button type="text">暂不提交</el-button>
        </div>
      </div>
    </div>
    <!-- 成功弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="center">
        <img class="logo" src="@/assets/ic_circle_login_was_successful.png" alt="">
        <div class="center-success">提交成功</div>
        <div class="center-finish" style="width:50%;text-align: center;">已交至后台审核，请耐心等待。</div>
        <el-button class="register-btn" type="primary" @click="handleLogin">返回登录页</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
import {
  createNamespacedHelpers
} from "vuex";
const {
  mapState,
  mapActions
} = createNamespacedHelpers("user");
export default {
  data() {
    return {
      imageUrl: "",
      fileList: [{
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      labelPosition: "right",
      formLabelAlign: {},
      dialogVisible: false,
    };
  },
  computed: {
    ...mapState({
      user_id: (state) => state.userId,
      user_name: (state) => state.name,
      user_role: (state) => state.roles,
    }),
  },
  methods: {
    // 上传照片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 上传文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },


    handleClose(done) {
      this.$confirm('确认关闭？关闭后返回登录页')
        .then(_ => {
          this.$router.push({
            name: 'login',
          })
        })
        .catch(_ => {});
    },

    handleLogin() {
      this.$router.push({
        name: 'login'
      })
    },
    // 表格提交
    handleSubmit(formLabelAlign) {
      this.$refs[formLabelAlign].validate(async (valid) => {
        if (valid) {
          try {
            this.dialogVisible = true;
          } catch (err) {
            console.log(err);
          }
        } else {
          this.$message.warning("请完善数据");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$theme: #2e5bff;

.container {
  background-color: #f0f2f5;
  height: 100%;

  .header {
    background-color: #ffffff;
    height: 72px !important;
    width: 100%;

    .header-left {
      float: left;
      margin-left: 343px;

      .logo {
        width: 50px;
        height: 50px;
        margin-top: 11px;
        float: left;
      }

      .title {
        font-size: 28px;
        font-family: PingFangSC-Regular;
        text-align: center;
        color: #000000;
        margin-left: 18px;
        float: left;
        margin-top: 22px;
      }
    }

    .header-right {
      float: right;
      margin-right: 383px;
      padding-top: 26px;
    }
  }

  /deep/ .el-tabs__nav {
    width: 100%;
    display: flex;
  }

  .main {
    background-color: #ffffff;
    width: 1300px;
    height: 650px;
    margin: 30px auto;

    .center-top {
      padding: 36px 0 0 56px;
    }

    .center-content {
      width: 1200px;
      margin: 68px auto;

      .form {
        padding: 51px 0 0 95px;
      }

      /deep/ .el-tabs__item {
        flex: 1;
        width: 203px !important;
        text-align: center;
      }

      /deep/ .el-tabs__item.is-active {
        background-color: $theme;
        color: #ffffff;
      }

      /deep/ .el-input {
        min-width: 300px !important;
      }

      .item {
        width: 320px;
        height: 105px;
        display: flex;
        background-color: #fffbf5;
        border: 1px solid #ffe9ca;
        padding: 25px 0 0 35px;
        margin: 0 auto;

        .item-info {
          margin-left: 24px;

          .item-info-desc {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #ffffff;
            line-height: 30px;
          }

          .item-info-phone {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 30px;
          }
        }
      }

      .tips {
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 300;
        color: #666666;
        margin: 0 auto;
        display: table;
        margin-top: 54px;
      }
    }

    .center-bottom {
      display: table;
      margin: 0 auto;
    }

    .register-btn {
      width: 280px;
      margin: 0 auto;
      background-color: $theme;
      color: #ffffff;

      &:hover {
        background-color: #2e77e6;
      }
    }

    .code {
      position: absolute;
      left: 310px;
      top: 0;
      z-index: 1;
      font-size: 12px;
      color: #2e5bff;
      cursor: pointer;
    }

    .code-time {
      position: absolute;
      left: 330px;
      top: 0px;
      z-index: 1;
      font-size: 14px;
      color: #2e5bff;
      cursor: pointer;
    }
  }
}

.center {
  height: 600px;
  display: flex;
  flex-direction: column;

  .logo {
    width: 158px;
    height: 164px;
    margin: 0 auto;
  }

  .center-success {
    margin-top: 25px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 30px;
    align-self: center;
  }

  .center-finish {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 300;
    color: #666666;
    align-self: center;
    margin: 31px 0 60px 0;
  }

  .register-btn {
    align-self: center;
    width: 30%;
    background-color: $theme;

    &:hover {
      background-color: #2e77e6;
    }
  }
}

/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.Tbutton {
  margin: 50px auto;
  width: 300px;
  display: flex;
  flex-direction: column;
}
</style>
